<template>
  <ju-metro-box class="shadow-sm"
                :col="col"
                :row="row">
    <div class="h-100"
         v-loading="loading">
      <slot></slot>
      <ju-icon v-if="showHelper"
               class="position-absolute top-0 end-0 m-2 "
               icon="el-icon-question"
               @click.native.stop="$emit('command','helper')" />
      <ju-icon v-if="showRefresh"
               class="position-absolute bottom-0 end-0 m-2 "
               icon="el-icon-refresh"
               @click.native.stop="$emit('command','refresh')" />
    </div>
  </ju-metro-box>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from "@some21/vue-class-decorator";

  @Component({
    name: "BoxBase",
    components: {
      JuMetroBox: () => import("@/components/Metro/JuMetroBox.vue"),
    },
  })
  export default class extends Vue {
    @Prop({ type: Boolean, default: false })
    showHelper: boolean;
    @Prop({ type: Boolean, default: false })
    showRefresh: boolean;
    @Prop({ type: Boolean, default: false })
    loading: boolean;

    @Prop({ type: Number, default: 1 })
    col: number;
    @Prop({ type: Number, default: 1 })
    row: number;
  }
</script>

<style lang="scss" scoped>
  .el-icon-question {
    color: var(--theme-gray);
    transition: all 0.1s;
    cursor: help;
    &:hover {
      color: var(--theme-info);
      transform: scale(1.15) rotate(360deg);
    }
  }
  .el-icon-refresh {
    color: var(--theme-gray);
    transition: all 0.1s;
    cursor: pointer;
    &:hover {
      color: var(--theme-primary);
      transform: scale(1.15) rotate(180deg);
    }
  }
</style>
